<template>
	<div class="editor-header">
		<div class="header_left dv">
			<div @click="onBack" class="ibox header_left_back">
				<i class="el-icon-arrow-left"></i>返回
			</div>
		</div>
		<div class="header_center dv">
			<!-- <i class="el-icon-data-line paddingR10"></i> -->
			<!-- <span class="paddingR5">-</span> -->
			{{ projectDataInfo.title }}
		</div>
		<div class="header_right dv">
			<div @click="onSaveProject" class="header-icon_wrap save">
				<img class="el-icon-upload icon" src="../../../assets/other/C.png"/>
				<span>&emsp;保存</span>
			</div>

			<div @click="onPreview" class="header-icon_wrap preview">
				<img class="el-icon-upload icon" src="../../../assets/other/N.png"/><span>&emsp;预览</span>
			</div>

			<div @click="onPublish" class="header-icon_wrap publish">
				<img class="el-icon-upload icon" src="../../../assets/other/M.png"/><span>&emsp;发布</span>
			</div>
		</div>
	</div>
</template>

<script>
import { mapState } from "vuex";
export default {
	name: "EditorHeader",
	data() {
		return {};
	},
	methods: {
		onBack() {
			this.$router.push({
				name: "projectCreate",
			});
		},
		onSaveProject() {
			let id = this.$route.params.id;
			let project = this.projectDataInfo;
			let newId = this.projectDataInfo._id ? this.projectDataInfo._id : id;
			if (!this.projectDataInfo.groupID) {
				this.projectDataInfo.groupID = "-1";
			}
			if (newId) {
				this.$axios.post("/project/update/" + newId, project).then((res) => {
					if (res.code === 200) {
						this.$msgbox({
							title: "提示",
							message: "更新成功",
							iconClass: "el-icon-success",
						});
					}
				});
			} else {
				this.$axios.post("/project/add", project).then((res) => {
					if (res.code === 200) {
						let projectInfo = res.body;
						this.$store.dispatch("setProjectDataInfo", projectInfo);
						this.$msgbox({
							title: "提示",
							message: "保存成功",
							iconClass: "el-icon-success",
						});
					}
				});
			}
		},
		onPreview() {
			let id = this.projectDataInfo._id;
			if (id) {
				window.open(`${this.$config.serverURl}/project/view/${id}`, "_blank");
			}
		},
		onPublish() {
			let id = this.projectDataInfo._id;
			if (id) {
				this.$axios.post("/project/publish/" + id).then((res) => {
					if (res.code === 200) {
						this.$msgbox({
							title: "提示",
							message: "发布成功",
							iconClass: "el-icon-success",
						});
						this.$router.push({
							name: "projectCreate",
						});
					}
				});
			}
		},
	},
	computed: {
		...mapState({
			projectDataInfo: (state) => state.powereditor.projectDataInfo,
		}),
	},
};
</script>

<style lang="stylus" scoped>
.editor-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 50px;
	z-index: 200;
	background: rgb(29, 30, 31);
	.dv {
		flex: 1;
	}
	.header_left {
		.header_left_back {
			display: flex;
			justify-content: center;
			align-items: center;
			// background: rgba(161,174,179,0.5);
			width: 70px;
			height: 28px;
			color: #fff;
			font-size: 13px;
			cursor: pointer;
		}
	}
	.header_center {
		text-align: center;
		color: rgb(161, 174, 179);
	}
	.header_right {
		display: flex;
		justify-content: flex-end;
		.header-icon_wrap {
			display: flex;
			width: 84px;
			height: 34px;
			margin: 0px 10px 0 0;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			color: white;
			font-size:14px;
			border-radius: 6px

			.icon {
				color: #4F7FED;
				width: 18px
				height: 18px
			}
			&.save {
				background: #1d1e1f;
			}
			&.preview {
				background: #1d1e1f;
			}
			&.publish {
				background: #1d1e1f;
			}
		}
		.header-icon_wrap:hover {
				background:rgba(255,255,255,0.06);
			}
	}
}
</style>
